<template>
  <div class="Tags02">
    <div class="flow">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" alt="item.title" style="height:100%;width:100%;"/>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="">
      <el-button @click="musicList">我的音乐</el-button>
      <el-button @click="addMusic">添加音乐</el-button>
      <div class="musicList" v-if="isOpenList">
        <el-table
          :data="musiclist"
          class="musicTable"
          height="300"
          stripe
          @row-dblclick="dbclick_getmusicurl"
          style="width: 1000vw">
          <!--          -->
          <el-table-column
            prop="musicer"
            label="歌曲作者"
            width=500vw>
          </el-table-column>
          <el-table-column
            prop="musicName"
            label="歌 名"
            class="musicRow"
            width=500vw>
          </el-table-column>
        </el-table>
      </div>
      <div class="addMusic" v-if="isaddMusic">
        <div style="margin: 20px"></div>
          <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" >
            <el-form-item label="音 乐 名 称" :rules="[{ required: true, message: '名字不能为空'}]">
              <el-input v-model.text="formLabelAlign.name" style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="歌 手 名 字" :rules="[{ required: true, message: '名字不能为空'}]">
              <el-input v-model="formLabelAlign.author" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="音乐网络地址" :rules="[{ required: true, message: '名字不能为空'}]">
              <el-input v-model="formLabelAlign.add" style="width: 80%"></el-input>
            </el-form-item>
            <el-button @click="commintmusic">提 交</el-button>
          </el-form>
      </div>
    </div>
    <div class="musicPlay">
      <!--    <audio ref="music" loop autoplay>-->
      <!--      <source src="http://music.163.com/song/media/outer/url?id=64634.mp3" type="audio/mpeg">-->
      <!--    </audio>-->
      <audio ref="audio" id="audio" :src="this.musicurl"
             @pause="onPause"
             @play="onPlay"
             @timeupdate="onTimeupdate"
             @loadedmetadata="onLoadedmetadata">
        您的浏览器不支持audio标签
      </audio>
      <div class="custom-audio clearfix">
        <div class="audio-item play" @click="play" v-if="!audio.playing">
          <img src="../assets/next.png" width="20"/></div>
        <div class="audio-item play" @click="pause" v-if="audio.playing">
          <img src="../assets/play.png" width="20"/></div>
        <el-tooltip class="item" effect="light" placement="top">
          <div slot="content">
            <el-slider vertical height="120px" :step="0.01" :max="1" v-model="audio.volume" @input="voiceChange()"
                       :format-tooltip="handelVoice"></el-slider>
          </div>
          <div class="audio-item mute" @click="mute" v-if="!audio.muted">
            <img src="../assets/high.png" width="20" alt=""/></div>
          <div class="audio-item mute" @click="cancelMute" v-if="audio.muted">
            <img src="../assets/low.png" width="20" alt=""/></div>
        </el-tooltip>
        <div class="audio-item play-time">{{ audio.currentTime | formatSecond}}</div>
        <div class="audio-item progress">
          <el-slider @change="progressChange($event)" @mouseup.native="mouseupChangeTime"
                     v-model="audio.currentTime" :format-tooltip="realFormatSecond" :max="audio.maxTime">
          </el-slider>
        </div>
        <div class="audio-item total-time">{{ audio.maxTime | formatSecond}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  function realFormatSecond(second) {
    let secondType = typeof second;
    if (secondType === 'number' || secondType === 'string') {
      second = parseInt(second);

      let hours = Math.floor(second / 3600);
      second = second - hours * 3600;
      let mimute = Math.floor(second / 60);
      second = second - mimute * 60;

      return ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2);
    } else {
      return '00:00';
    }
  }

  export default {
    name: "Tag02",
    data() {
      return {
        musicurl:"",
        labelPosition: 'left',
        formLabelAlign: {
          name: '',
          author: '',
          add: ''
        },
        musiclist: [],
        // 图片
        imgList: [
          {
            name: "1",
            src: require("@/assets/flow/1.png"),
            title: "这是1.png"
          },
          {
            name: "2",
            src: require("@/assets/flow/2.png"),
            title: "这是2.png"
          },
          {
            name: "3",
            src: require("@/assets/flow/3.png"),
            title: "这是3.png"
          },
          {
            name: "4",
            src: require("@/assets/flow/4.png"),
            title: "这是4.png"
          }, {
            name: "5",
            src: require("@/assets/flow/5.png"),
            title: "这是5.png"
          }, {
            name: "6",
            src: require("@/assets/flow/6.png"),
            title: "这是6.png"
          },
        ],
        isOpenList: true,
        isaddMusic: false,
        value: 20,
        audio: {
          // 播放状态
          playing: false,
          // 静音状态
          muted: false,
          // 音频当前播放时长
          currentTime: 0,
          // 音量
          volume: 1,
          // 音频最大播放时长
          maxTime: 0
        },
        cacheCurrent: 0,
        cacheVoice: 1
      }
    },

    methods: {
      // 双击歌名
      dbclick_getmusicurl(row, event, column){
        console.log(row, event, column);
      this.musicurl=row.musicUrl;
      this.$refs.audio.play();
        // console.log(row.musicUrl);
        // console.log(this.musicurl);
      },
      // 获取歌单
      musicList() {
        this.isOpenList = true;
        this.isaddMusic = false;
        this.$axios.get("http://127.0.0.1:5678/getAllToString").then(res => {
          // 将数据赋值给musiclist数组，数组是绑定在table，列通过prop取出对应数据
          this.musiclist = res.data.result;
          // let data = res.data.result;
          // // let data2 = [];
          // for (let a in data) {
          //   let i = {}
          //   i[0] = data[a].musicName;
          //   // this.musiclist.pull(i);
          //   // console.log(data2.push(i));
          // }
          console.log(this.musiclist);
        }).catch((error) => {
          console.log(error)
        })
      },
      // 添加歌曲方法
      commintmusic() {
        let name = this.formLabelAlign.name;
        let author = this.formLabelAlign.author;
        let add = this.formLabelAlign.add;
        if (name !== "" && author !== "" && add !== "") {
          this.$axios.post("http://127.0.0.1:5678/addMusic", {
            MusicName: name,
            Musicer: author,
            MusicUrl: add,
          }, {headers: {"content-type": "application/json"}})
            .then(function (response) {
              if (response.data == "歌曲已存在") {
                alert('歌曲已存在，请勿重复添加！');
              } else {
                alert('歌曲添加成功！');
              }
            })
            .catch(function (error) {
              console.log(error);
            }),
            this.formLabelAlign.name = "";
          this.formLabelAlign.author = "";
          this.formLabelAlign.add = "";
        }else {
          alert("必填项，请填写信息")
        }
      },
      addMusic() {
        this.isaddMusic = true;
        this.isOpenList = false;
      },
      // 轮播图
      flowImg() {
        let item = this.$refs.item;
        let imgUrl = "../assets/flow/" + item + ".png";
        this.$refs.src = imgUrl;
      },
      // 音频相关方法
      // 播放音频
      play() {
        this.$refs.audio.play();
      },

      // 暂停音频
      pause() {
        this.$refs.audio.pause();
      },

      // 当音频播放
      onPlay() {
        this.audio.playing = true;
      },

      // 当音频暂停
      onPause() {
        this.audio.playing = false;
      },

      // 拖动音量滚动条
      voiceChange() {
        this.cancelMute(false);
        if (this.audio.volume === 0) {
          this.mute(false)
        }
        this.$refs.audio.volume = this.audio.volume;
      },

      // 静音
      mute(event) {
        event && (this.cacheVoice = this.audio.volume);
        this.audio.volume = 0;
        this.audio.muted = true;
        this.$refs.audio.muted = true;
      },

      // 取消静音
      cancelMute(event) {
        event && (this.audio.volume = this.cacheVoice);
        this.audio.muted = false;
        this.$refs.audio.muted = false;
      },

      // 鼠标抬起改变当前时间点
      mouseupChangeTime() {
        this.progressChange(this.cacheCurrent);
      },

      // 拖动进度滚动条
      progressChange(value) {
        this.$refs.audio.currentTime = value >= 0 ? value : this.cacheCurrent;
        this.audio.currentTime = value >= 0 ? value : this.cacheCurrent;
      },

      // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
      onTimeupdate(res) {
        this.audio.currentTime = res.target.currentTime;
      },

      // 获取音频长度
      onLoadedmetadata(res) {
        this.audio.maxTime = parseInt(res.target.duration);
      },

      realFormatSecond(second) {
        this.cacheCurrent = second;
        return realFormatSecond(second);
      },

      // 处理音量显示
      handelVoice() {
        return parseInt(this.audio.volume.toFixed(2) * 100);
      },
    },
    // 将整数转化成时分秒
    filters: {
      formatSecond(second = 0) {
        return realFormatSecond(second);
      }
    }
  }
</script>

<style scoped lang="scss">

  /*.musicRow {*/
  /*  cursor: pointer;*/
  /*}*/

  .el-table, .musicTable {
    text-align: center !important;
    cursor: pointer;

  }
  .musicList, .addMusic {
    width: 100%;
    height: 294px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #b6d5e6;
  }

  .custom-audio {
    line-height: 68px;
    border: 1px solid #bec1ff;
    /*border-bottom: 1px  solid #bec1ff;*/
    margin-bottom: 10%;
    padding: 0 15px;
    text-align: center;

    .audio-item {
      float: left;

      img {
        vertical-align: middle;
      }

      &.play {
        width: 20px;
        cursor: pointer;
      }

      &.mute {
        width: 20px;
        margin-left: 8px;
        cursor: pointer;
        line-height: 30px;
        margin-top: 19px;
      }

      &.play-time {
        width: 80px;
      }

      &.progress {
        width: calc(100% - 238px);
        padding-top: 31px;

        > > > .el-slider__runway {
          margin: 0;
        }
      }

      &.total-time {
        width: 80px;
      }
    }
  }

</style>
